<template>
    <VaTableHead
            :onlyBase="f"
            :attribute="attribute"
            :action="query"
            :btnGroup="btnGroup"
            :searchData="searchData"
            @searchVisibleChange="searchVisibleChange"
    />

    <VaMultTable
            ref="tableMenu"
            :selection="true"
            :tableHead="tableHead"
            :multTable="[]"
            :param="searchParam"
            :searchData="searchData"
            :actionsData="tableBtnGroup"
            :searchVisible="searchVisible"
            @searchVisibleChange="searchVisibleChange"
            :requestApi="searching"
            children="childMenu"

    />
</template>

<script>
    import VaTableHead from "@/components/VaTableHead";
    import VaMultTable from "@/components/VaMultTable";

    import {mapActions} from 'vuex';
    import {ref, reactive,getCurrentInstance} from 'vue'
    import _ from "lodash";

    const tableHead = [
        {prop: "name", label: "名称", sortable: true, type: 'input', value: null},
        {prop: "path", label: "地址", condition:null },
        {prop: "icon", label: "图标", icon:true},
        {prop: "sortNo", label: "排序编码", type: 'input',value: null},
    ]

    export default {
        components: {VaTableHead, VaMultTable},
        name: "index",
        data() {
            return {
                f: false,
                multTable: [],
                tableHead: tableHead,
                tableBtnGroup: {
                    btnGroup: [{
                        label: '修改', action: 'update', permCode: "resource:edit", icon: 'el-icon-edit'
                    }, {
                        type: "danger",
                        label: '删除',
                        action: 'delete',
                        permCode: "resource:delete",
                        icon: 'el-icon-delete'
                    }],
                    width: 200,
                },
                attribute: {
                    btnSize: "small"
                },
            }

        },
        methods: {
            ...mapActions('menu', [
                'searching'
            ])
        },
        setup() {
            //DATA
            const {proxy} = getCurrentInstance();
            //查询参数
            let searchParam = ref({})

            //高级搜索框可见性
            let searchVisible = ref(false)


            //搜索数据
            let searchData = reactive(tableHead)

            //action
            const create = ()=>{
                proxy.$router.push({ path: "/system/menu/create"});
            }

            const btnGroup = reactive([{
                type: "primary",
                icon: "zc-icon-tianjiadaoqun",
                label: "添加",
                size: "small",
                permCode: "customers:add",
                action:create
            }, ])

            //fun
            /**
             * 搜索框可见性改变函数
             */
            const searchVisibleChange = () => {
                searchVisible.value = !searchVisible.value
            }

            const query = (param) =>{

                let searchParam = {};
                if (!_.isEmpty(param)){
                    searchParam.vagueQuery = param
                }
                //下节点方法
                proxy.$nextTick(() => {
                    proxy.$refs.tableMenu.queryData(searchParam);
                });
            }

            return {
                //DATA
                searchParam,
                searchData,
                searchVisible,
                btnGroup,
                //FUN
                searchVisibleChange,
                query
            }
        }
    }
</script>

<style scoped>
    .table-operate {
        padding: 0 12px 0 16px;
    }

</style>